<template>
  <div class="friendlist">
    <!-- 搜索框 -->
    <div class="demo-input-suffix">
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="input2"
        @keydown.enter.native="searchList"
        @keyup.native="change"
      ></el-input>
      <i
        class="el-icon-delete"
        @click="del"
        style="line-height:40px;font-size:18px;position:relative;left:-30px;"
      ></i>
      <el-button type="primary" @click="subdialogVisible = true">上传文件</el-button>
    </div>

    <el-progress id="progress" :percentage="percent" v-if="percent" :status="status"></el-progress>

    <ul>
      <li v-for="item in fileList" :key="item.id">
        <div class="friend-info">
          <div class="remark">{{item.fileName}}</div>
          <div class="address">{{item.createdTime | dateTime}}</div>
          <div class="duty_pass" v-if="item.isSecrecy == '0' ">(公开)</div>
          <div class="duty_pass" v-if="item.isSecrecy == '1' ">(私密)</div>

          <el-button type="primary" round class="btn" @click="downLoad(item)">下载</el-button>
        </div>
      </li>
    </ul>
    <!-- 上传文件 -->
    <el-dialog :visible.sync="subdialogVisible" width="30%" :show-close="false">
      <el-tabs v-model="activeName" @tab-click="btn_file">
        <el-tab-pane label="公开文件" name="first" class="open"></el-tab-pane>
        <el-tab-pane label="私密文件" name="second">
          <el-input v-model="upFile.secretkey" placeholder="请设置授权码" type="password"></el-input>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-upload
          class="upload-demo"
          :action="'/wechatwebsite/fileController/uploadDocumentFile.do'"
          :data="upFile"
          :before-upload="startUpload"
          :show-file-list="false"
          :on-progress="showProgress"
          :on-success="btn"
          :on-error="err"
        >
          <el-button size="small" type="primary" @click="btnok">点击上传</el-button>
        </el-upload>
      </span>
    </el-dialog>
    <!-- 下载文件 -->
    <el-dialog title="下载文件" :visible.sync="dialogVisible" width="30%" :show-close="false">
      <el-input placeholder="请输入授权码" type="password" v-model="updownFile.secretkey "></el-input>
      <el-button type="success" round class="downBtn" @click="downFile">下载文件</el-button>
    </el-dialog>
  </div>
</template>

<script>
import dateTime from "../../filter/date";
import Axios from "axios";
export default {
  data() {
    return {
      input2: "",
      subdialogVisible: false,
      dialogVisible: false,
      activeName: "first",
      percent: 0,
      status: "",
      upFile: {
        isSecrecy: 0, // 公开
        secretkey: "",
        userId: ""
      },
      fileList: [],
      updownFile: {
        secretkey: "",
        fileId: ""
      },
      search: ""
    };
  },
  created() {
    this.getAllfile();
  },
  methods: {
    del() {
      this.input2 = "";
      this.getAllfile();
    },
    searchList(e) {
      var params = new FormData();
      params.append("fileName", this.input2);
      Axios.post(
        "http://im.wzhwgg.com:8070/wechatwebsite/fileController/selectFileByName.do",
        params
      ).then(res => {
        this.fileList = res.data.object;
      });
    },
    change(e) {
      if (this.input2 == "") {
        this.getAllfile();
      }
    },
    showProgress(e) {},
    startUpload(e) {
      this.percent = 0;
      let index = 0;
      this.inderval = setInterval(() => {
        index += (100 - index) / 10;
        this.percent = Math.floor(index);
      }, 500);
    },
    // 请求文件数据
    async getAllfile() {
      // const { data: res } = await this.$http.get('http://m.hhkj-life.com/kingim/fileController/selectFiles.do')
      const { data: res } = await this.$http.get(
        "fileController/selectFiles.do"
      );
      // console.log(res.object);

      this.fileList = res.object;
    },
    // 上传文件设置文件公开 私密
    btn_file() {
      if (this.activeName == "first") {
        this.upFile.isSecrecy = 0;
      } else {
        this.upFile.isSecrecy = 1;
      }
    },
    btn() {
      this.$message("文件上传成功");
      clearInterval(this.inderval);
      this.percent = 100;
      this.status = "success";
      this.percent = 0;
      this.upFile.secretkey = "";
      this.getAllfile();
    },
    err() {
      this.$message("文件上传失败");
    },
    // 点击上传后 关闭弹窗
    btnok() {
      this.subdialogVisible = false;
    },
    // 判断下载文件是否公开 公开直接下载 私密打开弹框
    async downLoad(item) {
      let key = item.isSecrecy;
      let id = item.id;
      this.updownFile.fileId = id;
      if (key == "0") {
        var a = document.createElement("a");
        a.href = `http://im.wzhwgg.com:8070/wechatwebsite/fileController/judgmentSecretkey.do?fileId=${this.updownFile.fileId}&secretkey=${this.updownFile.secretkey}`;
        a.click();
      } else {
        this.dialogVisible = true;
      }
    },
    // 下载私密文件
    async downFile() {
      var a = document.createElement("a");
      a.href = `http://im.wzhwgg.com:8070/wechatwebsite/fileController/judgmentSecretkey.do?fileId=${this.updownFile.fileId}&secretkey=${this.updownFile.secretkey}`;
      a.click();
      this.updownFile.secretkey = "";
      this.dialogVisible = false;
    }
  },
  filters: {
    dateTime
  }
};
</script>

<style lang="stylus" scoped>
.friendlist {
  padding: 40px 100px;
  background-image: url('../../assets/images/chat-bg.png');
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;

  ul {
    height: calc(100vh - 120px);
    overflow-y: scroll;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
  }

  .downBtn {
    margin: 17px 0 0 50px;
  }

  .friend-info {
    padding: 8px;
    display: flex;
    position: relative;
    border-bottom: 1px solid #ccc;
    font-size: 16px;

    .remark {
      width: 35%;
      margin-top: 15px;
      line-height: 22px;
    }

    .address {
      width: 22%;
      text-align: center;
      margin-top: 15px;
      line-height: 22px;
    }

    .duty_pass {
      margin: 15px 0 15px 0px;
      color: #00DC41;
      width: 25%;
      text-align: center;
    }

    .btn {
      position: absolute;
      top: 17px;
      right: 10px;
      width: 100px;
    }
  }
}
</style>
<style>
@media screen and (max-width: 720px) {
  .friendlist {
    padding: 0px !important;
    background-image: url('../../assets/images/filesMove.png') !important;
  }

  .friendlist .friend-info .remark {
    width: 40% !important;
  }
  .friendlist .friend-info .address {
    width: 20% !important;
    text-align: center;
    margin-top: 15px;
  }
  .friendlist .friend-info .duty_pass {
    width: 16.5% !important;
  }
  .friendlist .friend-info .btn {
    width: 60px !important;
    padding: 2px 5px;
    margin-top: 6px;
  }
  .el-dialog {
    width: 70% !important;
  }
}
</style>

<style scoped>
#progress {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translate(-50%);
  width: 200px;
}
.demo-input-suffix {
  margin-bottom: 10px;
  width: 50%;
  display: flex;
}
    .el-input__prefix, .el-input__suffix {
      color: rgb(146, 193, 242);
    }
@media screen and (max-width: 768px) {
  .demo-input-suffix {
    margin-bottom: 10px;
    width: 80%;
    display: flex;
  }
}
</style>
  
